<template>
  <Header title="个人文章"></Header>

  <div class="ownArticle">
    <div class="ownArticle-card">
      <div class="ownArticle-content" v-for="(item) in state.List" :key="item.id">
        <input type="checkbox" v-model="state.checked[item.id]" @click="a">
        <div class="ownArticle-img">
          <img :src=item.picture alt="">
        </div>
        <div class="ownArticle-title">
          <p>{{ item.title }}</p>
          <p>{{ item.description }}</p>
          <p>{{ item.c_time }}</p>
        </div>

      </div>
    </div>

    <div class="ownArticle-footer">
      <div class="btn">
        <button @click="checkAllBox" v-if="state.checkAll">全选</button>
        <button @click="checkAllBox" v-else>取消</button>
        <button @click="deleteChecked">删除</button>
      </div>
    </div>

  </div>
</template>


<script setup>
import { ref } from 'vue';
import Header from '../components/Header.vue'
import { onMounted } from 'vue';
import { reactive } from 'vue';
import { showConfirmDialog } from 'vant';
import { showToast } from 'vant';
import axios from '../api/index.js';
import { useRoute } from 'vue-router';
import { showSuccessToast} from 'vant';

const route = useRoute()

const state = reactive({
  checked: [],
  checkAll: true,
  data: [],
  List: []
})

const a = () => {
  // console.log(state.checked);
}

// console.log(route.query.id);

onMounted( () => {
  getData()
})
// 获取页面数据
const getData = async () => {
  const result = await axios.post('/blog/idFindPpersonalArticles', {
    id: route.query.id
  })
  state.List = result.data
}

// 全选的按钮
const checkAllBox = () => {
  // console.log(1);

  state.checkAll = !state.checkAll;

  if (state.checkAll) {
    state.List.forEach(item => {
      state.checked[item.id] = false;
    });
  } else {
    state.List.forEach(item => {
      state.checked[item.id] = true;
    });
  }
}


// 删除所有被选中的
const deleteChecked = () => {
  let b = state.checked.map(item => {
    if (item === true) {
      return item
    }
  })
  const result = Object.keys(b).filter((key) => b[key] === true);
  // console.log(result); // 输出：所有为true的key
  state.data=result
  // console.log(state.data);
  if (state.data.length !== 0) {
    showConfirmDialog({
      title: '删除',
      message:
        '确认是否删除',
    })
      .then(async () => {
        // on confirm 确认
        // console.log(10);
        const data = await axios.post('/blog/idDeleteArticle', {
          id: result.map(Number)
        })
        // console.log(data);
        // 刷新页面
        showSuccessToast('删除成功');
        getData()
      })

      .catch(() => {
        // on cancel 取消
      });

  } else {
    showToast('选择不能为空');
  }

}
</script>



<style lang="less" scoped>
.ownArticle {
  width: 100%;
  height: 105px;
  padding: 8px;
  box-sizing: border-box;

  .ownArticle-card {
    padding-bottom: 30px;
  }

  input {
    width: 25px;
  }

  .ownArticle-content {
    width: 100%;
    height: 100%;
    display: flex;
    border: 1px solid #efefef;
    border-radius: 5px;
    /* 设置圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    background-color: #ffffff;
    /* 设置背景颜色 */
    margin-bottom: 5px;

    .ownArticle-img {
      padding: 5px;
      height: 100%;

      img {
        height: 100%;
        width: 80px;
        border-radius: 8px;
      }
    }

    .ownArticle-title {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 1;

      p {
        width: 100%;
      }

      P:nth-child(1) {
        font-size: 15px;
        font-weight: bold;
        overflow: hidden;
        /* 不换行显示 */
        // white-space: nowrap;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }

      P:nth-child(2) {
        font-size: 15px;
        color: #999;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }

      P:nth-child(3) {
        font-size: 20px;
      }
    }
  }

  .ownArticle-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0 10px;

    // height: 50px;
    button {
      width: 45%;
      background-color: #1989fa;
      height: 30px;
    }
  }
}
</style>


